<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/taglibs.jsp" %>

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<%@ include file="../common/btcss.jsp" %>
	<%@ include file="../common/btjs.jsp" %>
	<link rel="stylesheet" href="${ctx }/static/lib/weekdatepicker/css/default.css">
	<link rel="stylesheet" href="${ctx }/static/lib/datatables/1.10.9/css/jquery.dataTables.min.css">
	<style type="text/css">
		#searchname{
			font-size:14px;
			line-height: 20px;
			padding:5px 3px;
			width:220px;
		}
	/* WebKit browsers */
		::-webkit-input-placeholder {
			color: #999;
		}
		/* Mozilla Firefox 4 to 18 */
		:-moz-placeholder {
			color: #999;
			opacity: 1;
		}
		/* Mozilla Firefox 19+ */
		::-moz-placeholder {
			color: #999;
			opacity: 1;
		}
		/* Internet Explorer 10+ */
		:-ms-input-placeholder {
			color: #999;
		}
		tbody{
			font-size:12px;
		}
		.layui-layer-msg{
		 border: 1px solid rgba(0, 0, 0, 0.4);
		}
	</style>
	<title>世界玖玖包机管理理系统</title>
</head>
<body>
	<ol class="breadcrumb navbar-fixed-top">
        <li><a href="${ctx }/main/welcome">首页</a></li>
        <li><a href="${ctx }/usermanager/queryUser?querytype=${querytype}"><c:choose><c:when test="${querytype=='P' }">平台</c:when><c:when test="${querytype=='S' }">供应商</c:when></c:choose>账户管理</a></li>
    </ol>
    
	<div class="container" style="margin-top: 40px;margin-left:5px; margin-bottom: 10px;">
		<form id="ipcclistform" action="${ctx }/usermanager/queryUser" method="post">
			<input type="hidden" name="querytype" value="${querytype }" />
			<table>
				<tr>
					<td style="padding: 2px 10px 2px 0px;">
					<input type="text" placeholder="请输入用户名或登录名..." id="searchname" name="searchname" value="${searchname }" />
					</td>
					
					<td style="padding: 2px 10px 2px 10px;"><button
							class="btn btn-default" id="search" type="button">查询</button></td>
					
				</tr>
			</table>
		</form>
	</div>
	<div class="container" style="margin-left:5px;margin-bottom: 10px;">
		<table class="table table-striped table-bordered example">
			<thead>
				<tr>
					<th>选择</th>
					<th>序号</th>
					<th>用户姓名</th>
					<th>登录帐号</th>
					<th>角色授权</th>
					<th>公司名称</th>
					<th>用户状态</th>
					<th>上次登录时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${list }" var="user" varStatus="vs">
					<tr>
						<td><input type="checkbox" name="usercheck" value="${user.id }"/></td>
						<td>${vs.count }</td>
						<td>${user.nickname }</td>
						<td>${user.username }</td>
						<td>
							<c:forEach items="${user.roleList }" var="role" varStatus="vs">
		                    	<c:choose>
		                    		<c:when test="${vs.count==1 }">${role.roleName }</c:when><c:otherwise>,${role.roleName }</c:otherwise>
		                    	</c:choose>
		                    </c:forEach>
						</td>
						<td>${user.company }</td>
						<td name="showcheck">
							<c:choose>
								<c:when test="${user.status==0 }">待审核</c:when>
								<c:otherwise>已审核</c:otherwise>
							</c:choose>
						</td>
						<td></td>
						<td><a href="javascript:void(0)" onclick="editUser(${user.id})" style="margin-right: 5px">编辑</a>
							<a href="javascript:void(0)" onclick="showUser(${user.id})" style="margin-right: 5px">查看</a>
							<a href="javascript:void(0)"onclick="delUser('${user.id}')" >删除</a></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	<div class="container" style="margin-left:5px;">
		<table>
			<tr>
				<td style="padding: 2px 10px 2px 0px;"><button class="btn btn-default" id="addBtn" type="button">新增</button></td>
				<td style="padding: 2px 10px 2px 0px;"><button class="btn btn-default" id="selectAllBtn" type="button">全选</button></td>
				<td style="padding: 2px 10px 2px 0px;"><button class="btn btn-default" id="checkBtn" type="button">审核</button></td>
				<td style="padding: 2px 10px 2px 0px;"><button class="btn btn-default" id="delBatchBtn" type="button">批量删除</button></td>	
			</tr>
		</table>
	</div>
    
	<div id="addUserDiv" style="display: none;">
		<form id="addUserFrom" action="${ctx }/usermanager/addUser" method="post">	
		<input type="hidden" name="type" value="${querytype }"/>
		<input type="hidden" name="id" id="uid"/>
		<table class="table table-striped table-bordered example">
			<tr>
				<td align="right" style="margin:3px 5px;">登录帐号：</td>
				<td align="left" style="margin:3px 5px;"><input type="text" name="username" id="username"/></td>
				<td align="right" style="margin:3px 5px;">用户姓名：</td>
				<td align="left" style="margin:3px 5px;"><input type="text" name="nickname" id="nickname"/></td>
			</tr>
			<tr id="pwdtr">
				<td align="right" style="margin:3px 5px;">密码：</td>
				<td align="left" style="margin:3px 5px;"><input type="password" name="password" id="password"/></td>
				<td align="right" style="margin:3px 5px;">确认密码：</td>
				<td align="left" style="margin:3px 5px;"><input type="password" name="confirmPassword" id="confirmPassword"/></td>
			</tr>
			<tr>
				<td align="right" style="margin:3px 5px;">电话：</td>
				<td align="left" style="margin:3px 5px;"><input type="text" name="phone" id="phone"/></td>
				<td align="right" style="margin:3px 5px;">邮箱：</td>
				<td align="left" style="margin:3px 5px;"><input type="text" name="email" id="email"/></td>
			</tr>
			<tr>
				<td align="right" style="margin:3px 5px;">公司名称：</td>
				<td colspan="3" align="left" style="margin:3px 5px;"><input style="width:400px;" type="text" name="company" id="company"/></td>
			</tr>
			<tr>
				<td align="right" style="margin:3px 5px;" id="role">角色(多选):</td>
				<td colspan="3" align="left" style="margin:3px 5px;">
					<c:forEach items="${roleList }" var="role" varStatus="vs">
						<c:if test="${vs.index!=0 && vs.index%5==0 }"><br/></c:if>
						<input type="checkbox" name="roleIdList" value="${role.id }" />
						<label style="margin-right:10px;"><c:out value="${role.roleName }"></c:out></label>
					</c:forEach>
				</td>
			</tr>
			<tr>
				<td colspan="4" align="center">
					<input style="margin: 0px 10px; " class="btn btn-default" id="saveUserBtn" name="saveUserBtn" type="button" value="保存" />
					<input style="margin: 0px 10px;" class="btn btn-default" id="outBtn" name="outBtn" type="button" value="退出" />
				</td>
			</tr>
		</table>
		</form>
	</div>
	<script type="text/javascript" src="${ctx}/static/lib/layer/layer.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/jquery.md5.js"></script>
	<script>
			//加载完成
			
	  	$(function(){
			var mainheight = $(window.parent.document).find("iframe[name='main']").height();
	  		$("body").css({"height":mainheight-100+"px"});
	  	});
	  	
		$("#search").on("click",function(){
			layer.load(2, {
			    shade: [0.5,'#fff'] //0.1透明度的白色背景
			});
			$("#ipcclistform").submit();
		});
		
		/**新增按钮事件**/
		$("#addBtn").on("click",function(){
			$("#showmessage").hide();
			clearForm();
			var index = layer.open({
				  			type:1,
				  			shade :0.3,
				  			title:'新增用户',
				  			area:['600px','350px'],
				  			shadeClose:true,
				  			content:$("#addUserDiv")
				  		});
			var changed = 0;
			/**保存按钮事件*/
			$("#saveUserBtn").off().on("click",function(){
				var $username = $("#username");
				var $nickname = $("#nickname");
				var $password = $("#password");
				var $confirmPassword = $("#confirmPassword");
				var $phone = $("#phone");
				var $email = $("#email");
				if($username.val()==''){
					layer.tips('登录帐号不能为空。', '#username', {
					    tips: [2, '#FF0033'],
					    time: 4000
					});
					$username.focus();
					return false;
				}else{
					var partten = /^[a-zA-Z0-9_]{6,16}$/;
					if(!partten.test($username.val())){
						layer.tips('登录帐号格式不正确(必须由6-16个数字、字母或下划线组成)。', '#username', {
						    tips: [2, '#FF0033'],
						    time: 4000
						});
					$username.focus();
					return false;
					}
				}
				if($nickname.val()==''){
					layer.tips('用户姓名不能为空。', '#nickname', {
					    tips: [2, '#FF0033'],
					    time: 4000
					});
					$nickname.focus();
					return false;
				}
				if($password.val()==''){
					layer.tips('密码不能为空。', '#password', {
					    tips: [2, '#FF0033'],
					    time: 4000
					});
					$password.focus();
					return false;
				}
				if($confirmPassword.val()==''){
					layer.tips('确认 密码不能为空。', '#confirmPassword', {
					    tips: [2, '#FF0033'],
					    time: 4000
					});
					$confirmPassword.focus();
					return false;
				}
				if($password.val()!=$confirmPassword.val()){
					layer.tips('两次输入密码不一致，请重新输入', '#password', {
					    tips: [2, '#FF0033'],
					    time: 4000
					});
					$password.val("");
					$confirmPassword.val("");
					$password.focus();
					return false;
				}
				if($email.val()!=''){
					var partten = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
					if(!partten.test($email.val())){
						layer.tips('邮箱格式不正确，请确定', '#email', {
						    tips: [2, '#FF0033'],
						    time: 4000
						});
						$email.focus();
						return false;
					}
				}
				var rolenum = $("[name='roleIdList']:checked").size();
				if(rolenum==0){
					layer.tips('角色不能为空。', '#role', {
					    tips: [3, '#FF0033'],
					    time: 4000
					});
					return false;
				}
				var pwdMd5 = $.md5($password.val());
	            $password.val(pwdMd5);
				$.ajax({
					type : "POST",
					url : "${ctx}/usermanager/addUser",
					dataType : "json",
					data :$("#addUserFrom").serialize(),
					success:function(data){
						changed = 1;
						layer.alert(data.msg, {
							icon:data.status,
							closeBtn: 0,
							shift: 3 //动画类型
						});
						if(data.status==1){
							clearForm();
						}
					}
				});
			});	  		
			
			
			$("#outBtn").off().on("click",function(){
				layer.close(index);
				if(changed==1){
					$("#search").click();
				}
			});
		});
		
		/**全选按钮*/
		$("#selectAllBtn").on("click",function(){
			$("[name='usercheck']").prop("checked",true);
		});
		/**审核按钮*/
		$("#checkBtn").on("click",function(){
			var checknum = $("[name='usercheck']:checked").size();
			if(!checknum||checknum===0){
				layer.msg('没有选择用户!',  {
				    icon: 2,
				    shift: 6,
				    time: 3000,
				     btn: ['好的']
				});
				return false;
			}
			var hasNocheck = false;
			var ids = "";
			$("[name='usercheck']:checked").each(function(){
				var showcheck = $(this).parents("tr").find("td[name='showcheck']").html();
				if(showcheck.trim()==='待审核'){
					hasNocheck = true;
					ids +=$(this).val()+",";
				}
			});
			if(!hasNocheck){
				layer.msg('所选用户已全部审核，不需要再审核!', {
				    icon: 0,
				    shift: 6,
				    time: 3000,
				     btn: ['好的']
				});
				return false;
			}
			ids = ids.substr(0,ids.length-1);
			$.ajax({
				type : "POST",
				url : "${ctx}/usermanager/checkUser",
				dataType : "json",
				data :{ids:ids},
				success:function(data){
					layer.alert(data.msg, {
						icon:data.status,
				        closeBtn: 0,
				        shift: 3 //动画类型
				    }, function(index){
						$("#search").click();		    
					    layer.close(index);
					});
				}
			});
		});
		
		$("#delBatchBtn").on("click",function(){
			var checknum = $("[name='usercheck']:checked").size();
			if(!checknum||checknum===0){
				layer.msg('没有选择用户!',  {
				    icon: 2,
				    shift: 6,
				    time: 3000,
				     btn: ['好的']
				});
				return false;
			}
			var ids = "";
			$("[name='usercheck']:checked").each(function(){
				ids +=$(this).val()+",";
			});
			ids = ids.substr(0,ids.length-1);
			delUser(ids);
		});
		/**编辑用户*/
		function editUser(id){
			clearForm();
			$.ajax({
					type : "POST",
					url : "${ctx}/usermanager/queryUserById",
					dataType : "json",
					data :{id:id},
					success:function(data){
						if(data.user!=null){
							var user = data.user;
							$("#showmessage").hide();
							clearForm();
							var index = layer.open({
								  			type:1,
								  			shade :0.3,
								  			title:'编辑用户',
								  			area:['600px','350px'],
								  			shadeClose:true,
								  			content:$("#addUserDiv")
								  		});
							var changed = 0;
							var $username = $("#username");
							var $nickname = $("#nickname");
							var $password = $("#password");
							var $confirmPassword = $("#confirmPassword");
							var $phone = $("#phone");
							var $email = $("#email");
							var $company = $("#company");
							var $role = $("[name='roleIdList']");
							$("#uid").val(user.id);
							$username.val(user.username);
							$username.prop("disabled",true);
							$nickname.val(user.nickname);
							$nickname.prop("disabled",true);
							$phone.val(user.phone);
							$email.val(user.email);
							$company.val(user.company);
							var roleids = user.roleIds;
							
							if(roleids){
								roleids = roleids.split(",");
								$role.each(function(){
									var thisid = $(this).val();
									for(var i=0;i<roleids.length;i++){
										if(parseInt(thisid) === parseInt(roleids[i])){
											$(this).prop("checked",true);
											return;
										}
									}
								});
							}
							
							/**保存按钮事件*/
							$("#saveUserBtn").off().on("click",function(){
								var $password = $("#password");
								var $confirmPassword = $("#confirmPassword");
								var $phone = $("#phone");
								var $email = $("#email");
								
								if($password.val()!=$confirmPassword.val()){
									layer.tips('两次输入密码不一致，请重新输入', '#password', {
									    tips: [2, '#FF0033'],
									    time: 4000
									});
									$password.val("");
									$confirmPassword.val("");
									$password.focus();
									return false;
								}
								if($email.val()!=''){
									var partten = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
									if(!partten.test($email.val())){
										layer.tips('邮箱格式不正确，请确定', '#email', {
										    tips: [2, '#FF0033'],
										    time: 4000
										});
										$email.focus();
										return false;
									}
								}
								var rolenum = $("[name='roleIdList']:checked").size();
								if(rolenum==0){
									layer.tips('角色不能为空。', '#role', {
									    tips: [3, '#FF0033'],
									    time: 4000
									});
									return false;
								}
								if($password.val()!=''){
									var pwdMd5 = $.md5($password.val());
					            	$password.val(pwdMd5);
								}
								$.ajax({
									type : "POST",
									url : "${ctx}/usermanager/editUser",
									dataType : "json",
									data :$("#addUserFrom").serialize(),
									success:function(data){
										changed = 1;
										layer.alert(data.msg, {
											icon:data.status,
											closeBtn: 0,
											shift: 3 //动画类型
										});
									}
								});
							});
							
							$("#outBtn").off().on("click",function(){
								layer.close(index);
								if(changed==1){
									$("#search").click();
								}
										   
							});
						}else{
							layer.alert("未获取到用户信息！", {
								icon:6,
						        closeBtn: 0,
						        shift: 3 //动画类型
						    });				
						}
					}
				});
		};
		function showUser(id){
			$("#showmessage").hide();
			clearForm();
			$.ajax({
					type : "POST",
					url : "${ctx}/usermanager/queryUserById",
					dataType : "json",
					data :{id:id},
					success:function(data){
						if(data.user!=null){
							var user = data.user;
							clearForm();
							var index = layer.open({
								  			type:1,
								  			shade :0.3,
								  			title:'显示用户',
								  			area:['600px','330px'],
								  			shadeClose:true,
								  			content:$("#addUserDiv")
								  		});
							var $username = $("#username");
							var $nickname = $("#nickname");
							var $password = $("#password");
							var $confirmPassword = $("#confirmPassword");
							var $phone = $("#phone");
							var $email = $("#email");
							var $company = $("#company");
							var $role = $("[name='roleIdList']");
							$username.val(user.username);
							$username.prop("disabled",true);
							$nickname.val(user.nickname);
							$nickname.prop("disabled",true);
							$phone.val(user.phone);
							$phone.prop("disabled",true);
							$email.val(user.email);
							$email.prop("disabled",true);
							$company.val(user.company);
							$company.prop("disabled",true);
							$("#pwdtr").hide();
							var roleids = user.roleIds;
							if(roleids){
								roleids = roleids.split(",");
								$role.each(function(){
									var thisid = $(this).val();
									for(var i=0;i<roleids.length;i++){
										if(parseInt(thisid) === parseInt(roleids[i])){
											$(this).prop("checked",true);
											return;
										}
									}
								});
							}
							$role.prop("disabled",true);
							$("#saveUserBtn").hide();
							$("#outBtn").off().on("click",function(){
								layer.close(index);
							});
						}else{
							layer.alert("未获取到用户信息！", {
								icon:6,
						        closeBtn: 0,
						        shift: 3 //动画类型
						    });				
						}
					}
				});
		}
		/**删除用户*/
		function delUser(ids){
			var num = ids.split(",").length;
			var tipmsg = "确认删除这"+num+"个用户么？";
			layer.confirm(tipmsg, {
				icon: 5,
			    btn: ['确定','我再想想'] //按钮
			}, function(){
				$.ajax({
					type : "POST",
					url : "${ctx}/usermanager/delUser",
					dataType : "json",
					data :{ids:ids},
					success:function(data){
						layer.alert(data.msg, {
							icon:data.status,
					        closeBtn: 0,
					        shift: 3 //动画类型
					    }, function(index){
							$("#search").click();		    
						    layer.close(index);
						});
					}
				});
			    
			}, function(){
			    layer.msg('明智的选择了放弃，聪明！', {
			        icon: 6,
			        time: 4000, 
			        btn: ['多谢夸奖']
			    });
			});
		}
		/**清除添加from表单中的数据*/
		function clearForm(){
			//清除
			$("#username").val("");
			$("#nickname").val("");
			$("#password").val("");
			$("#confirmPassword").val("");
			$("#phone").val("");
			$("#email").val("");
			$("#message").val("");
			$("#company").val("");
			$("[name=roleIdList]").prop("checked",false);
			$("#username").prop("disabled",false);
			$("#nickname").prop("disabled",false);
			$("#phone").prop("disabled",false);
			$("#email").prop("disabled",false);
			$("#company").prop("disabled",false);
			$("[name=roleIdList]").prop("disabled",false);
			$("#pwdtr").show();
			$("#saveUserBtn").show();
		}
	</script>
</body>
</html>